<template>
  <div>
      <a-modal
        :visible="visible"
        title="课程教学质量评教"
        :width="980"
        :confirmLoading="confirmLoading"
        :maskClosable="false"
        @cancel="() => { $emit('cancel') }"
    >
        <a-row>
            <a-col :span="8">
                班级：{{courseInfo.jxbh}}
            </a-col>
            <a-col :span="8">
                课程：{{courseInfo.kcmc}}
            </a-col>
            <a-col :span="8">
                任课教师：{{courseInfo.rkjsxm}}
            </a-col>
        </a-row>
        <a-card :bordered="false" style="margin-top: 10px">
        <s-table
            ref="table"
            size="default"
            :columns="columns"
            :data="loadData"
            :alert="{ show: false }"
            :pageSize="1000"
            bordered
            :scroll="{ y: 450 }"
        >
            <!-- <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 + (parameter.pageNo - 1) * parameter.pageSize }}
            </span> -->
            <template slot="operation" slot-scope="a,b">
                <a-alert v-if="b.show" v-model="b.show" :type="b.type" :message="b.message" banner />
                <a-input v-model="b.df" :maxLength="3" class="evaluate" :read-only="readOnly" @change="fsChange(b.df,b)"/>
            </template>

        </s-table>
            <div class="pjnl">
                <p>对本门课程教学的意见和建议<span style="color: red;">*</span></p>
                <div class="a_textarea">
                    <a-textarea class="evaluate" v-model="pjnl" placeholder="" :read-only="readOnly" auto-size />
                </div>
            </div>
        </a-card>
        <template slot="footer">
            <a-button key="back" @click="() => { $emit('cancel') }">
            {{courseInfo.id?'关闭':'取消'}}
            </a-button>
            <a-popconfirm placement="topRight" title="请核对并确认课程评价分数，防止填写错误，提交后不可修改！" ok-text="确定" cancel-text="取消" @confirm="onOk">
                <a-button v-if="courseInfo.id == undefined" key="submit" type="primary">
                    提交
                </a-button>
            </a-popconfirm>
        </template>
    </a-modal>

  </div>
</template>

<script>
import { STable } from '~'
export default {
    name: 'OnlineReviewDetail',
    props: {
        visible: Boolean,
        typeUser: '',
        courseInfo: {
        type: Object,
        default () {
            return {}
        }
    },
    confirmLoading: Boolean
  },
  watch:{
      visible(value){
          if(value){
                let that = this
                that.$refs.table.refresh(true)
                this.readOnly = false
          }else{
              this.pjnl = ''
          }
      },
  },
   data(){
        return{
            readOnly: false,
            type: 'error',
            show: false,
            message: '111',
            queryParam: {},
            pjnl: '',
            dataList: {},
            list: {},
            columns:[
                {
                    title: '评价项目',
                    dataIndex: 'pjxm',
                    width: '160px',
                    scopedSlots: { customRender: 'pjxm' },
                    customRender: (value, row, index) => {
                        console.log(value, row, index)
                        const obj = {
                            children: (
                                <div>
                                    {value}
                                    <span style="color: red;">*</span>
                                </div>
                            ),
                            attrs: {},
                        };
                        if(row.seq >= 1){   // 第一行数据开始，跨行合并的长度为数据data的长度
                            obj.attrs.rowSpan = row.childSize;
                        }
                        if (row.seq >= 2 ) {   // 从第一行往后的所有行表格均合并
                            obj.attrs.rowSpan = 0;
                        }

                        return obj;
                    }
                },
                {
                    title: '序号',
                    dataIndex: 'seq',
                    width: '80px',


                },
                {
                    title: '项目要素',
                    dataIndex: 'name',

                },
                {
                    title: '评价分数（百分制）60分以下为不合格',
                    width: '200px',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operation' },

                },

            ],
            parameter: {
                pageNo: 1,
                pageSize: 10
            },
            loadData: parameter => {
                this.parameter = parameter
                parameter.pageNum = parameter.pageNo
                if(this.courseInfo.id){
                    console.log(this.typeUser)
                    let url = ''
                    if(this.typeUser == 'dd'){
                        url = this.$api.student.onComTeachDetailDf(this.courseInfo.id)

                    }else if(this.typeUser == 'stu'){
                        //学生评教管理
                        url = this.$api.student.stuComTeachDetail(this.courseInfo.id)
                    }else{
                        url = this.$api.student.ddComTeachSearchDetail(this.courseInfo.id)
                    }
                    return url.then(res => {
                            console.log(res)
                            this.dataList = res.data
                            let newData = []
                            this.pjnl = this.dataList.pjnl
                            this.readOnly = true
                            res.data.dfList.map(item=>{
                              item.dfList.map(it => {
                                it.pjxm = item.name
                                it.pjseq = item.seq
                                it.childSize = item.dfList.length
                              })
                              newData = newData.concat(item.dfList)
                            })
                            return this.list = {
                                data: newData,
                                pageNo: parameter.pageNum,
                                pageSize: parameter.pageSize,
                                totalPage: res.data.total?Math.ceil(res.data.total / parameter.pageSize):1,
                                totalCount: res.data.total?res.data.total:0
                            }
                        })
                }else{
                    let params = Object.assign(this.queryParam, parameter)
                    //督导课程评教
                    return this.$api.student.ddComTeachDetail(params).then(res => {
                        console.log(res)
                        this.dataList = res.data
                        let newData = []
                        res.data.map(item=>{
                          item.children.map(it => {
                            console.log(it)
                            it.pjxm = item.name
                            it.pjseq = item.seq
                            it.childSize = item.childSize
                            it.show = this.show
                          })
                          newData = newData.concat(item.children)
                        })
                        console.log(newData,1111111)
                        // newData.push({pjxm: '对本门课程教学的意见和建议：',pjseq: 1100,seq:"",name:''})
                        return this.list = {
                            data: newData,
                            pageNo: parameter.pageNum,
                            pageSize: parameter.pageSize,
                            totalPage: Math.ceil(res.data.total / parameter.pageSize),
                            totalCount: res.data.total
                        }
                    })
                }

            },
        }
    },
  components: {
    STable
  },
  methods: {
    fsChange(df,b){
        if(df){
            b.show = true
            if(df > 100 || df < 0 || df.indexOf('.') != -1){
                b.type = 'error'
                b.message = "请输入0-100的整数！"
            }else if(df < 60){
                b.type = 'warning'
                b.message = "不合格"
            }else{
                 b.show = false
            }
        }

    },
    onOk(){
        console.log(this.list.data)
        let params = {
          pkxxId: this.courseInfo.pkxxId,
          pjnl: this.pjnl,
          dfList: []
        }
        this.dataList.map((item,index) => {
            params.dfList.push({
                kcpjzbId:item.id,
                dfList:[]
            })
            item.children.map((it,ind) => {
                params.dfList[index].dfList.push({
                    kcpjzbId: it.id,
                    df: it.df?it.df:''
                })
            })
        })
        console.log(params)
        let paramsState = true
        let message = ''
        params.dfList.map(item=>{
            item.dfList.map(it=>{
                if(it.df == ''){
                    paramsState = false
                    message = "评价分数未填写完整"
                }else if(it.df > 100 || it.df < 0 || it.df.indexOf('.') != -1){
                    paramsState = false
                    message = "请输入0-100的整数！"
                }
                if(!paramsState){
                    return
                }
            })
        })
        console.log(params.pjnl,121212)
        if(params.pjnl == ''){
            paramsState = false
            message = "对本门课程教学的意见和建议未填写完整"
        }
        if(!paramsState){
            this.$notification.error({
                title: '评教失败',
                message: message,
                // description:'登录成功',
                placement: 'topRight',
            });
            return
        }
        this.$api.student.onComTeachDf(params).then(res => {
            this.$notification.success({
                title: '评教成功',
                message: res.msg,
                // description:'登录成功',
                placement: 'topRight',
            });
            this.$emit('cancel')
        })

    },
    onChange(e){
        console.log(e)
        this.$db.save('checked',e.target.checked)
    }
  }
}
</script>

<style lang="less">
.evaluate{
    outline: none;
    border:0px;
}
.pjnl{
    // width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    margin-right: 4px;
    p{
        width: 239px;
        margin: 0;
        padding: 16px;
    }
    .a_textarea{
        border-left: 1px solid #eee;
        padding: 16px;

      .evaluate{
            outline: none;
            border:0px;
            width: 600px;
        }
    }
}
.tips{
    white-space: normal;
}
</style>
